<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
    
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>系统角色列表</title> 

<link href="${ctx }/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/custom/uimaker/icon.css">
<link href="${ctx }/css/basic_info.css" rel="stylesheet">
</head> 
<body>
    <div class="container">
       <div class="left-tree">
       		<ul id="tt" class="easyui-tree"></ul>
       </div>
       <div class="content">		
	    	<table id="dg" class="easyui-datagrid" style="width:100%;height:660px"  data-options="
                
                url:'${ctx}/role/find',
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:true,
                pagination:false,
                fitColumns:true,
                striped:true,
                checkOnSelect:true,
                selectOnCheck:true,
                collapsible:true,
                toolbar:'#tb',
                pageSize:10,
                onBeforeEdit:function(index,row){
                	row.editing=true;
                	editAction(index);
                },
                onAfterEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                },
                onCancelEdit:function(index,row){
                	row.editing=false;
                	editAction(index);
                },
                onClickRow:function(index,row){
                	showMenuTree();
                },
                onCheck:function(index,row){
                	showMenuTree();
                }
                ">
		            <thead>
		                <tr>
		                	<th field="ck" data-options="checkbox:true"></th>
		                    <th field="name" width="110" data-options="editor:'textbox'">角色名</th>
		                    <th field="createDate" width="170" data-options="editor:'textbox'">创建时间</th>
		                    <th field="active" align="center" width="105" data-options="
		                    	formatter:function(v,r,i){
		                    		var str = '';
		                    		if('admin'!=r.loginName){
			                    		if(!r.editing){
				                    		str += '<a href=\'#\' onclick=\'editRow(this)\'>编辑</a>&nbsp;|&nbsp;';
				                    		str += '<a href=\'#\' onclick=\'delRow(this)\'>删除</a>';
			                    		}else{
				                    		str += '<a href=\'#\' onclick=\'saveRow(this)\'>保存</a>&nbsp;|&nbsp;';
				                    		str += '<a href=\'#\' onclick=\'cancelRow(this)\'>取消</a>';
			                    		}
		                    		}
		                    		return str;
		                    	}
		                    ">操作</th>
		                </tr>
		            </thead>
		        </table>
		      <input type="hidden" id="ctx" value="${ctx }">  
		      <div id="tb" style="padding:0 30px;">
		        	角色名: <input class="easyui-textbox" type="text" name="name" style="width:166px;height:35px;line-height:35px;"></input>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true">查询</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRow()">新增</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveGrant()">角色授权</a>
		      </div>
		 </div>   
    </div>
    
    
    <script type="text/javascript" src="${ctx }/custom/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx }/js/iud.js"></script>
    <script type="text/javascript" src="${ctx }/js/extEasyUI.js"></script>
    <script type="text/javascript">
        
        $(function(){
        	showMenuTree();
        });
    
        function showMenuTree(){
        	$('#tt').tree({
        		url:'${ctx}/menu/find',
        		lines:true,
        		checkbox:true,
        		cascadeCheck:false,
        		loadFilter:function(data){
        			return convert(data);
        		},
        		onLoadSuccess:function(node,data){
        			var row = $('#dg').datagrid('getSelected');
        			var rid = row.id;
        			$.ajax({
        				type:'post',
        				url:'${ctx}/role/findRoleMenu/'+rid,
        				dataType:'json',
        				success:function(r){
        					if(r.length>0){
        						for(var i=0;i<r.length;i++){
        							var mid = r[i].mid;
        							var node = $('#tt').tree('find',mid);
        							if(node){
        								$('#tt').tree('check',node.target);
        							}
        						}
        					}
        				}
        			});
        		}
        	});
        }
        
        function saveGrant(){
        	var row = $('#dg').datagrid('getSelected');
        	if(row==null){
        		alert("请选择授权的角色!");
        		return;
        	}
        	var mids = [];//声明数组
        	
        	//获取所有选中的节点
        	var cns = $('#tt').tree('getChecked');
        	for(var i=0;i<cns.length;i++){
        		var cn = cns[i];
        		var mid = cn.id;
        		mids.push(mid);//给数组赋值
        	}
        	$.ajax({
        		type:'get',
        		url:'${ctx}/role/grant?rid='+row.id+"&mids="+mids,
        		dataType:'json',
        		success:function(r){
        			alert(r.msg);
        		}
        	});
        }
    
        
        
        
    </script>
</body> 
</html>
    